<div class="modal-dialog add-new-node-to-db-group" role="document">
    <div class="modal-content" tabindex="-1">
        <div class="modal-header">
            <div class="flex-horizontal">
                <div class="flex-grow">
                    <h3>Add a new node to the database group</h3>
                </div>
                <div>
                    <button type="button" class="close" data-bind="click: $root.close" aria-hidden="true">
                        <i class="icon-cancel"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="modal-body">
            <div class="flex-form">
                <div class="form-group" data-bind="validationElement: nodeTag">
                    <div>
                        <label class="control-label">Node tag</label>
                    </div>
                    <div class="flex-grow">
                        <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                            <span data-bind="text: nodeTag() ? 'Node ' + nodeTag() : 'Select cluster node'"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" data-bind="foreach: nodesCanBeAdded">
                            <li><a href="#" data-bind="text: 'Node ' + $data, click: $root.selectedClusterNode"></a></li>
                        </ul>
                        <span class="help-block" data-bind="validationMessage: nodeTag"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">&nbsp;</label>
                    <div class="toggle">
                        <div data-placement="right" data-toggle="tooltip" title="Mentor node is responsible for replicating data to the newly added node" data-animation="true">
                            <input id="manualMentorNode" type="checkbox" data-bind="checked: manualChooseMentor, disable: $root.possibleMentors().length === 0">
                            <label for="manualMentorNode">Set preferred mentor node</label>
                        </div>
                    </div>
                </div>
                <div data-bind="validationElement: mentorNode, collapse: manualChooseMentor">
                    <div class="form-group">
                        <div>
                            <label class="control-label">Preferred Mentor</label>
                        </div>
                        <div class="flex-grow">
                            <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                                <span data-bind="text: mentorNode() ? 'Node ' + mentorNode() : 'Select preferred mentor'"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" data-bind="foreach: $root.possibleMentors">
                                <li><a href="#" data-bind="text: 'Node ' + $data, click: $parent.mentorNode.bind($parent.mentorNode, $data)"></a></li>
                            </ul>
                            <span class="help-block" data-bind="validationMessage: mentorNode"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div data-bind="with: encryptionSection">
                <h3>Encryption configuration</h3>
                <div data-bind="compose: $root.setupEncryptionKeyView"></div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="text-right">
                <button type="button" class=" btn btn-default" data-bind="click: close"><i class="icon-cancel"></i><span>Cancel</span></button>
                <button data-bind="click: addNode, disable: spinners.addNode, css: { 'btn-spinner': spinners.addNode }" type="button" class="btn btn-primary">
                    <i class="icon-plus"></i><span>Add node</span>
                </button>
            </div>
        </div>
    </div>
</div>
